<template>
    <!-- 借贷详情 -->
    <div class="loanDetails">
        <backHeader title="贷款还款详情" :fn="backFn" />
        <main class="loanDetails-list">
            <div class="list-box">
                <header class="flex items-center my-30">
                    <img class="box-img mr-10" :src="`${HOST_URL}/symbol/${'usdt'}.png`" @error="handleImageError" />
                    <p style="color: #717580;" class="font-38">USDT</p>
                </header>
                <div>
                    <div v-for="(value,key) in nameList" :key="key" class="flex justify-between items-center py-20">
                        <p style="color: #717580;">{{ value }}</p>
                        <p class="font-600">{{ list[key] }}</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import backHeader from '@/components/backHeader/index.vue';
import { HOST_URL } from '@/config';
import defaultImage from '@/assets/loading-default.png';
export default {
    components:{
        backHeader,
    },
    data() {
        return {
            defaultImage,
            HOST_URL,
            list:{
                code:'32132123123',
                num:132132,
                num2:3132132,
                type:'手动还款',
                time:'2024-11-23 15:21:26',
                state:'等待审批',
            },
            nameList:{
                code:'订单号',
                num:'贷款还款金额',
                num2:'剩余数量',
                type:'贷款还款方式',
                time:'时间',
                state:'状态',
            }
        }
    },
    methods: {
        backFn(){
            this.$emit('close',false);
        },
        handleImageError(event) {
            event.target.src = this.defaultImage;
        },
    },
}
</script>

<style lang="scss" scoped>
.loanDetails{
    background-color: #f4f6f8;
    height: 100%;
    .loanDetails-list{
        padding: 30px;
        .list-box{
            padding: 20px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            .box-img{
                width: 62px;
                height: 62px;
            }
        }
        
    }
}
</style>